<template>
	<!-- 已登录 -->
	<div v-if="isLogin">
		<!-- 用户信息 -->
		<van-cell center class="member">
			<template #icon>
				<van-image :src="avatar" width="80px" @error="onError()"></van-image>
			</template>
			<template #title>
				<span class="title">{{ user.name }}</span>
			</template>
		</van-cell>
		<!-- 用户课操作功能列表 -->
		<van-cell v-for="(item, i) of cellItems" :key="i" :icon="item.img" :title="item.title" is-link
			:to="{name:item.name}" />
		<van-cell @click="onClickLogout" icon="user-o" title="退出登录" is-link />
	</div>
	<!-- 未登录 -->
	<div v-else>
		<!-- 用户信息 -->
		<van-cell center class="member" is-link to="login">
			<template #icon>
				<van-image :src="avatar_default"  width="80px"></van-image> 
			</template>
			<template #title>
				<span class="title">登录 / 注册</span>
			</template>
		</van-cell>
	</div>
</template>
<script>
	import {getTokenLocal,getUserLocal,removeTokenLocal} from "@/utils/auth.js"
	import {getDetailByIdAPI} from "@/api/user.js";
	import {getDetailById1API} from "@/api/get.js";
	
	export default {
		data() {
			return {
				user: {},
				avatar_default: require("@/assets/images/avatar_default.png"),
				avatar: null,
				isLogin: false,
				cellItems: [{
						title: "我的订单",
						name: "orderList",
						img: "orders-o",
					},
					{
						title: "收货地址",
						name: "addressList",
						img: "envelop-o",
					},
					{
						title: "我的收藏",
						name: "working",
						img: "point-gift-o",
					},
					{
						title: "个人资料",
						name: "profile",
						img: "user-o",
					},
					{
						title: "修改密码",
						name: "updatePwd",
						img: "records",
					},
				],
			};
		},
		//初始页面数据
		mounted() {
			this.user = getUserLocal();
			this.avatar = this.avatar_default;
			//判断是否用户登录，看Token是否为空
			let token = getTokenLocal();
			this.isLogin = token ? true : false;
			
			if (this.isLogin) {
				getDetailByIdAPI(this.user.id).then(result => {
					this.avatar = this.APIDomainName + result.data.avatar;
				}).catch(() => {});
			}
		},
		methods: {
			onError() {
						console.log('onError 加载图片出错');
						this.avatar=require("@/assets/images/logo.png");
					},
			//点击用户退出事件
			onClickLogout() {
				removeTokenLocal();
				this.avatar = this.avatar_default;
				this.$toast("退出成功");
				this.isLogin = false;
			},
		},
	};
</script>
<style lang="less" scoped>
	.member {
		margin-top: 15px;
		padding: 10px;
		background: linear-gradient(90deg, #28a2ff, #ffd787);
		box-shadow: 0 0.1rem 0.25rem #f8e3c6;
	}

	.title {
		padding-left: 20px;
		font-size: 24px;
		color: rgb(65, 16, 241);
	}
</style>